<template>
	<view>
		<view :style="'height:'+(nh+th)+'px'">
		            
		    <view class='top-in' :style="{'padding-top':nh+'px','background-color':bgColor}">
		        <view :style="'height:'+(th)+'px'">
		            <view v-if="isShow" class="nt-left">
		                <view class="nl-frame" :style="'height:'+(th)+'px'">
		                    <view class="opa nl-icon iconfont icon-left" v-if="canback" @click="navback" :style="'color:'+(lwColor?lwColor:'#000')+';font-size:'+lwFont+'upx'"></view>
		                </view>
		            </view>
		            <view class="nt-right" :style="'line-height:'+th+'px'">
		                <text class="nr-text" :style="'color:'+(lwColor?lwColor:'#000')+';font-size:'+lwFont+'upx'">{{lwTitle}}</text>
		            </view>    
		        </view>    
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			lwFont: {
			  type: String,
			  default: ''
			},
			lwTitle:{
				type:String,
				default:'自定义导航栏'
			},
	
			isShow:{
				type:Boolean,
				default:true
			},
			lwColor:{
				type:String,
				default:'#000'
			},
			
			bgColor:{
				type:String,
				default:'#fff'
			}
		},
		data() {
			return {
				nh:0,
				th:46,
				canback:true
			};
		},
		created() {
			//计算顶部导航栏的高度
			uni.getSystemInfo({
				success: res => {
					//导航高度
					this.nh=res.statusBarHeight;
					console.log(this.nh,"看一下")
				}, fail(err) {
					console.log(err);
				}
			})
			this.can_back();
		},
		methods:{
			can_back(){
				this.canback=(getCurrentPages().length>1);
			},
			navback(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "icon.css";
.top-in{width:100%;box-sizing:border-box;z-index:999;position:fixed;}

.nt-left{
    position:absolute;
    left:5px;
}
.nl-frame{
    display:flex;
    align-items:center;

}
.nl-icon{
    font-size:30upx;
    margin:0 10px;
}
.nl-icon:actibe{
    opacity:0.7;
}


.nt-right{
    text-align:center;
}
.nr-text{
    font-size:32upx;
}
</style>
